<template>
  <div class="echarts-map">
    <div id="specialMap"></div>
  </div>
</template>

<script lang="ts" setup>
  // 3D地图认识 MultiPolygon, Polygon等多边形, 不认识LineString
  import 'echarts-gl';
  import { onMounted } from "vue";
  import * as echarts from 'echarts';
  import xyj from '@/assets/json/320000.json';
  // 设立图表dom
  let chartObj: any = null;
  let mapDom: HTMLElement | null = null;
  // 渲染图表
  const renderChart = () => {
    mapDom = document.getElementById("specialMap");
    // 在echarts初始化之前注册地图
    echarts.registerMap('xyj', { geoJSON: xyj } );
    chartObj = echarts.init(mapDom);
    chartObj.setOption({
      geo3D: {
        map: "xyj", //注册地图的名字
        roam: true, //开启鼠标缩放和平移漫游。默认不开启
        label: {
          show: true,  
          textStyle: {
            color: "rgb(255,0,0)",
            borderWidth: 1,
            borderColor: '#fff'
          }
        },
        itemStyle: {
          color: "#4189f2", // 背景
          opacity: 1, //透明度
          borderWidth: 0.1, // 边框宽度
          borderColor: "#eee", // 边框颜色
          fontSize: 1, //
        },
        viewControl: {
          distance: 120,
          alpha: 70, // 上下旋转的角度
          beta: 0, // 左右旋转的角度
        },
      }
    });
  }

  // 文档挂载之后进行渲染
  onMounted(() => {
    renderChart();
  }); 
</script>

<style lang="less" scoped>
  .echarts-map {
    box-sizing: border-box;
    padding-top: 50px;
    #specialMap {
      width: 100%;
      height: 530px;
      margin: 0 auto;
    }
  }
</style>